<template>
  <SettingBox title="功能">
    <SettingBoxItem label="内容" tip="slot | 内容">
      <el-input size="small" placeholder="请输入按钮内容" v-model="config.slot"/>
    </SettingBoxItem>   
  </SettingBox>
  <SettingBox title="外观">
    <SettingBoxItem label="类型" tip="type | 设置按钮类型">
      <el-select size="small" placeholder="请选择按钮类型" v-model="config.type">
          <el-option label="主按钮" value="primary"></el-option>
          <el-option label="成功按钮" value="success"></el-option>
          <el-option label="警告按钮" value="warning"></el-option>
          <el-option label="危险按钮" value="danger"></el-option>
          <el-option label="信息按钮" value="info"></el-option>
      </el-select>
    </SettingBoxItem>
    <SettingBoxItem label="尺寸" tip="size | 设置按钮大小">
          <el-radio-group size="small" v-model="config.size">
              <el-radio-button label="大" value="large" />
              <el-radio-button label="中" value="default"></el-radio-button>
              <el-radio-button label="小" value="small" />
          </el-radio-group>
    </SettingBoxItem>
    <SettingBoxItem label="形状" tip="shape | 设置按钮形状">
          <el-radio-group v-model="config.shape">
              <el-radio-button label="默认" value="" />
              <el-radio-button label="圆形" value="circle"></el-radio-button>
              <el-radio-button label="圆角" value="round" />
          </el-radio-group>
    </SettingBoxItem> 
  </SettingBox>
  <SettingBox title="状态">
    <SettingBoxItem label="是否禁用" tip="disabled | 是否为禁用状态">
      <el-switch v-model="config.disabled"/>
    </SettingBoxItem>   
  </SettingBox>
</template>
<script lang="ts" setup>

defineOptions({
  name: "DangerButtonConfig"
})

defineProps({
config: {
  type: Object,
  required: true,
},
});
</script>
<style scoped lang="scss">

</style>